<template>
    <div class="resources">
        <div class="search">
            <el-form :inline="true" :model="searchData" size="mini" class="demo-form-inline">
                <el-form-item label="市">
                    <el-select v-model="options.city_name" disabled>
                    </el-select>
                </el-form-item>
                <el-form-item label="区县" prop="c_secondary_area">
                    <el-select v-model="searchData.c_secondary_area" placeholder="请选择">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="(item,index) in options.area_list" :key="index" :label="item.name" :value="item.code"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="房型" prop="c_room">
                    <el-select v-model="searchData.c_room" placeholder="请选择">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="(item,index) in options.roomtype" :key="index" :label="item.st_name" :value="item.st_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="交易" prop="c_trading_type">
                    <el-select v-model="searchData.c_trading_type" placeholder="请选择" @change="transactChange">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="(item,index) in trading_type_opt" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="c_buy_status">
                    <el-select v-model="searchData.c_buy_status" placeholder="请选择">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="(item,index) in options.status" :key="index" :label="item.st_name" :value="item.st_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用途" prop="c_use_type">
                    <el-select v-model="searchData.c_use_type" placeholder="请选择" @change="typeChange">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="(item,index) in options.use" :key="index" :label="item.st_name" :value="item.st_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="日期" prop="date_type">
                    <el-select v-model="searchData.date_type" placeholder="请选择">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="(item,index) in date_type_opt" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开始" prop="start_time">
                    <el-date-picker type="date" placeholder="请选择" v-model="searchData.start_time" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束" prop="end_time">
                    <el-date-picker type="date" placeholder="请选择" v-model="searchData.end_time" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="类型" prop="c_room_type" v-if="typeOne === 1">
                    <el-select v-model="searchData.c_room_type" placeholder="请选择">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="(item,index) in options.zsq_type" :key="index" :label="item.st_name" :value="item.st_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="类型" prop="c_room_type" v-if="typeOne === 2">
                    <el-select v-model="searchData.c_room_type" placeholder="请选择">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="(item,index) in options.spw_type" :key="index" :label="item.st_name" :value="item.st_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="类型" prop="c_room_type" v-if="typeOne === 3">
                    <el-select v-model="searchData.c_room_type" placeholder="请选择">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="(item,index) in options.xx_type" :key="index" :label="item.st_name" :value="item.st_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="类型" prop="c_room_type" v-if="typeOne === 4 || typeOne === 5">
                    <el-select v-model="searchData.c_room_type" placeholder="请选择">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="(item,index) in options.cc_type" :key="index" :label="item.st_name" :value="item.st_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="类型" prop="c_room_type" v-if="typeOne === 6">
                    <el-select v-model="searchData.c_room_type" placeholder="请选择">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="(item,index) in options.dp_type" :key="index" :label="item.st_name" :value="item.st_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="类型" prop="c_room_type" v-if="typeOne === 7">
                    <el-select v-model="searchData.c_room_type" placeholder="请选择">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="(item,index) in options.c_type" :key="index" :label="item.st_name" :value="item.st_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="朝向" prop="c_toward">
                    <el-select v-model="searchData.c_toward" placeholder="请选择">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="(item,index) in options.oriented" :key="index" :label="item.st_name" :value="item.st_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="类别" prop="c_professional_type">
                    <el-select v-model="searchData.c_professional_type" placeholder="请选择">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="(item,index) in options.category" :key="index" :label="item.st_name" :value="item.st_id"></el-option>
                    </el-select>
                </el-form-item>
                <div>
                    <el-form-item label="购房价格" prop="c_price_min">
                        <el-input v-model="searchData.c_price_min" class="small_inp" :disabled="searchData.c_trading_type == 2"></el-input>
                    </el-form-item>_
                    <el-form-item label="" prop="c_price_max">
                        <el-input v-model="searchData.c_price_max" class="small_inp" :disabled="searchData.c_trading_type == 2"></el-input>
                    </el-form-item>
                    <el-form-item label="租房价格" prop="c_rent_price_min">
                        <el-input v-model="searchData.c_rent_price_min" class="small_inp" :disabled="searchData.c_trading_type == 1"></el-input>
                    </el-form-item>_
                    <el-form-item label="" prop="c_rent_price_max">
                        <el-input v-model="searchData.c_rent_price_max" class="small_inp" :disabled="searchData.c_trading_type == 1"></el-input>
                    </el-form-item>
                    <el-form-item label="面积" prop="c_acreage_min">
                        <el-input v-model="searchData.c_acreage_min" class="small_inp"></el-input>
                    </el-form-item>_
                    <el-form-item label="" prop="c_acreage_max">
                        <el-input v-model="searchData.c_acreage_max" class="small_inp"></el-input>
                    </el-form-item>
                </div>
                <el-form-item label="公私" prop="c_private_guest">
                    <el-select v-model="searchData.c_private_guest" placeholder="请选择">
                        <el-option v-for="(item,index) in private_guest" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="部门" prop="c_store_id">
                    <el-select v-model="searchData.c_store_id" placeholder="请选择部门" @change="obtainUsers">
                        <!--<el-option v-for="(item,index) in optionName" :key="index" :label="item.name" :value="item.id"></el-option> -->
                        <el-option-group v-for="group in optionName" :key="group.label" :label="group.label">
                            <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-option-group>
                    </el-select>
                </el-form-item>
                <el-form-item label="员工" prop="c_employees_id">
                    <el-select v-model="searchData.c_employees_id" placeholder="请选择员工">
                        <el-option v-for="(item,index) in userTypes" :key="index" :label="item.u_username" :value="item.u_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="关键字" prop="keywords">
                    <el-input v-model="searchData.keywords" placeholder="编号、姓名、电话、房号"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class='Intelligence-search'>
            <el-form :inline="true" :model="searchData" size="mini" class="demo-form-inline">
                <el-form-item>
                    <el-button type="primary" @click="search">查询</el-button>
                    <el-button type="primary" @click="addAccount">添加客源</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class='content'>
            <!-- 列表 -->
            <div class='list'>
                <el-table ref="multipleTable" tooltip-effect="light" :data="list.data" style="width: 100%" @row-click="getfollowlist">
                    <el-table-column align="center" prop="c_numbering" label="编号" width="105"></el-table-column>
                    <el-table-column align="center" prop="c_trading_type_name" label="交易类型" width="88"></el-table-column>
                    <el-table-column align="center" prop="c_entrust_time" label="委托日" width="140"></el-table-column>
                    <el-table-column align="center" prop="c_area_address" label="地址" width="120" show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" prop="c_floor" label="楼层" width="90"></el-table-column>
                    <el-table-column align="center" prop="c_room_type_name" label="房型" width="90"></el-table-column>
                    <el-table-column align="center" prop="c_buy_status_name" label="购买状态" width="88"></el-table-column>
                    <el-table-column align="center" prop="c_user_intention_name" label="意向" width="60"></el-table-column>
                    <el-table-column align="center" label="面积" width="110">
                        <template slot-scope="scope">
                            {{scope.row.c_acreage_min}}-{{scope.row.c_acreage_max}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="c_toward_name" label="朝向" width="90"></el-table-column>
                    <el-table-column align="center" label="价格" width="110">
                        <template slot-scope="scope">
                            {{scope.row.c_price_min}}-{{scope.row.c_price_max}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="name" label="部门" width="90"></el-table-column>
                    <el-table-column align="center" prop="u_username" label="员工" width="90"></el-table-column>
                    <el-table-column align="center" :formatter="privateGuest" prop="c_private_guest" label="公私" width="90"></el-table-column>
                    <el-table-column align="center" prop="c_followup_time" label="最后跟进日" width="140"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="edit(scope.row)" type="text" size="small">编辑</el-button>
                            <el-button @click.native.prevent="delect(scope.row)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination :current-page="current" @current-change="handleCurrentChange" :total="list.total" style="margin-top:30px;"></el-pagination>
            </div>
            <!-- 主要信息、跟进列表 -->
            <div class="mo_bottom">
                <div class="mo_bottom_left">
                    <!-- 客源信息 -->
                    <p class="mo_tit">{{maininfo.type}}</p>
                    <p class="txt">{{maininfo.info}}</p>
                    <p class="remarks">{{maininfo.c_remark}}</p>
                    <p>{{maininfo.user}}</p>
                </div>
                <div class="operation">

                    <!-- 跟进列表 -->
                    <el-table :data="followlist" tooltip-effect="light" style="width: 100%" class="followtable" :show-header="false">
                        <el-table-column align="center" :formatter="followFun" prop="cf_content" label="跟进" show-overflow-tooltip></el-table-column>
                        <el-table-column align="center" prop="u_username" label="跟进人" width="120"></el-table-column>
                        <el-table-column align="center" prop="cf_created_at" label="跟进时间" width="140"></el-table-column>
                    </el-table>
                     
                </div>
            </div>

        </div>
    </div>
</template>

<style>
    .home .view-content{
        width: 87%;
    }
    .el-form-item__label,.el-form-item__content{
        font-size: 12px;
    }
    .el-input{
        padding-right: 5px;
    }
    .el-select-dropdown__item{
        font-size: 12px;
        padding: 0px 10px;
        height: 26px;
        line-height: 26px;
    }
    .el-input,.el-date-editor.el-input{
        width: 145px;
    }
    .el-checkbox__label{
        font-size: 12px;
    }
    .el-checkbox__inner{
        vertical-align: bottom;
    }
    .small_inp.el-input{
        width: 55px;
    }
    .mo_bottom{
        font-size: 12px;
        line-height: 1.5em;
        margin-top: 10px;
    }
    .mo_bottom:after{
        content: ".";
        clear: both;
        display: block;
        overflow: hidden;
        height: 0;
    }
    .mo_bottom_left{
        float: left;
        width: 20%;
        border-right: 1px solid #e4e7ed;
        box-sizing: border-box;
    }
    .operation{
        float: left;
        width: 78%;
        padding-left: 2%;
    }
    .mo_bottom_left p{
        border-top: 1px solid #e4e7ed;
        padding: 2px 0px;
        color: #606266;
    }
    .mo_bottom_left p.mo_tit{
        color: brown;
        height: 18px;
        overflow: hidden;
    }
    .record_list{
        list-style: none;
        color: #606266;
        height: 165px;
        overflow-y: auto;
    }
    .record_list li{
        padding: 2px 0px;
        border-top: 1px solid #e4e7ed;
    }
    .remarks{
        height: 73px;
        overflow: hidden;
    }
    .followtable td{
        font-size: 12px;
        padding: 2px 0px;
    }
</style>
<script src='../../../contral/resources.js'></script>